<template>
    <div class="app-container">
        <div>
            <el-page-header @back="goBack" title="返回" style="font-size:20px ; font-weight: bold" content="用户编辑"></el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form ref="userForm" :model="userForm" label-width="80px" style="width:80%">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="用户名">
                        <el-input v-model="userForm.userName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性别">
                        <el-select v-model="userForm.sex" placeholder="性别" size="small" style="width:90%">
                            <el-option
                                    v-for="item in sexs"
                                    :key="item.id"
                                    :label="item.sex"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="电话">
                        <el-input v-model="userForm.phone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="角色">
                        <el-select v-model="userForm.roleId" filterable placeholder="角色"  style="width:90%">
                            <el-option
                                    v-for="item in roleInfo"
                                    :key="item.id"
                                    :label="item.roleName"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮箱">
                        <el-input v-model="userForm.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="地址">
                        <el-input type="textarea" v-model="userForm.address"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div>
                <el-row :gutter="20">
                    <el-col :span="8">
                    </el-col>
                    <el-col :span="8">
                        <template #default="scope">
                            <el-button type="primary" style="margin-left: 10px;" @click="UserEditSubmit()">确认修改</el-button>
                        </template>
                      <!--  <el-button @click="goBack()" style="margin-left: 10px;" >返回</el-button>-->
                    </el-col>
                    <el-col :span="8">
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
    import request from "../../utils/request";
    import {ElMessage} from "element-plus";

    export default {
        name: "UserEditAndDetail.vue",

        data(){
            return{
                userForm:[],
                roleInfo:[],
                sexs:[{'sex':'男','id':1},{'sex':'女','id':0}],

            }
        },
        created(){
            this.getRoleInfo();
            this.userDetailInfo();
        },
        methods:{

            getRoleInfo(){
                request.get("/api/user/getRoleInfo").then(resp=>{
                    if(resp.status =='M0200'){
                        this.roleInfo=resp.data;
                    }
                })
            },
            goBack(){
                this.$router.push('/userManager')
            },

            getRoleInfo(){
                request.get("/api/user/getRoleInfo").then(resp=>{
                    if(resp.status =='M0200'){
                        this.roleInfo=resp.data;
                    }
                })
            },

            userDetailInfo(){
                // 取到路由带过来的参数
                const routerParams = this.$route.query.id;
                const handleType=this.$route.query.type;
                // 将数据放在当前组件的数据内

                request.get("/api/user/getUserInfoById",{
                    params:{
                        id:routerParams
                    }
                }).then(resp=>{
                    if(resp.status=='M0200'){
                        this.userForm=resp.data
                    }
                })
            },
            watch: {
                '$route': 'goodsDetailInfo'
            },

            UserEditSubmit(){
                request.post('/api/user/userInfoEdit',this.userForm).then(resp =>{

                })

            }
        }


    }
</script>

<style scoped>

</style>
